<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    async function  myAsync() {
        //异步函数，当整个页面的js顺序执行到此函数时，新开一个线程去执行此函数，主线程继续顺序执行页面的js
        //await，本函数执行到此处时等待其执行完毕再向下执行，必须与async搭配(反之不然)
        await console.log("正在执行异步函数(myAsync)")//假设这是一个耗时的操作或为另一个async函数
        //同时，被async修饰的函数的返回值会被封装成一个Promise对象，这个对象会被自动解析提取出其中的真正的返回值(return语句的)
        // 但是解析需要耗时，如果不加await,可能会直接得到这个Promise对象，而不是真正的返回值
        return '我是异步函数的返回值'
    }
    console.log("下面直接输出异步函数的返回值，是一个Promise对象，真正的返回值在此对象中")
    console.log(myAsync())
    console.log("下面使用await修饰异步函数然后再得到真正的返回值，但是由于await只能在async修饰的函数中使用，所以在此定义一个函数获取myAsync()的返回值")
    let result=async function(){
        let data=await myAsync()
        console.log(data)//只能在异步函数中直接获取另一个异步函数的返回值
        return data//又是一个Promise对象
    }
    console.log(result())
</script>
<script>
    console.log("\n下面演示Promise对象的使用")
    console.log("在JavaScript中，Promise对象是用来处理异步操作的一种方式，它可以帮助你以更加有序和易于管理的方式组织代码，避免所谓的“回调地狱”(比如ajax请求中的success和error回调)。")
    function myPromise(num) {//通常是在函数中创建Promise,但也可以直接const myPromise=new Promise()
        return new Promise(((resolve, reject) =>{//演示一下箭头函数
            //异步操作
            setTimeout(()=>{
                if(num>100)
                    resolve("操作成功(myPromise)")
                else
                    reject("操作失败(myPromise)")
            },2000)
        } ))
    }
    //消费Promise
    myPromise(200).then(result=>{//演示一下箭头函数
        console.log(result)//当promise执行成功时，这里会输出"操作成功"
    }).catch(function (result) {
        console.log(result)//当promise执行失败时，这里会输出"操作失败"
    })
</script>
<script>
    console.log("\n下面演示Promise对象与async函数的结合")
    console.log("注意到async函数的返回值其实都被封装成了一个Promise对象")
    async function async_promise(num) {
        if(num>100)
            return Promise.resolve("操作成功(async_promise)")
        else
            return Promise.reject("操作失败(async_promise)")
    }
    console.log("下面直接输出async_promise的返回值")
    console.log(async_promise(200))
    console.log("下面通过then、catch读取async_promise的返回值")
    async_promise(100).then((result)=>{
        console.log(result)
    }).catch((result)=>{
        console.log(result)
    })
</script>
</html>